<template>
    <div class="new-s-curve-module">
        <div class="new-s-curve-module-wrap">
            <el-row class="new-s-curve-module-item margin-bottom64" :gutter="24" justify="center">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="new-s-curve-module-left padding-right100">
                        <h5 class="new-s-curve-module-title">Investors</h5>
                        <h3 class="new-s-curve-module-text">Stay up to date on G  E’s plans for growth as a
                            standalone company.</h3>
                        <div class="new-s-curve-module-link">
                            <a class="p related-content__footer_link" target="" data-analytics-tracking-event="link_click"
                                data-analytics-link-type="Related Content"
                                data-analytics-link-name="More Insights from G  E"
                                data-analytics-link-title="">Read more<svg id="Layer_1" data-name="Layer 1"
                                    xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                    <g id="Caret_Right_-_32" data-name="Caret Right - 32">
                                        <path
                                            d="M11,30a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42L22.59,16,10.29,3.71a1,1,0,0,1,1.42-1.42l13,13a1,1,0,0,1,0,1.42l-13,13A1,1,0,0,1,11,30Z">
                                        </path>
                                    </g>
                                </svg>
                            </a>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="new-s-curve-module-right">
                        <el-image fit="cover" :src="imgUrl1" class="el-image-class"></el-image>
                    </div>
                </el-col>
            </el-row>
            <el-row class="new-s-curve-module-item margin-bottom40" :gutter="24" justify="center">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="new-s-curve-module-right">
                        <el-image fit="cover" :src="imgUrl2" class="el-image-class pos-relative"></el-image>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="new-s-curve-module-left padding-left100">
                        <h5 class="new-s-curve-module-title">Career opportunities</h5>
                        <h3 class="new-s-curve-module-text">Meet the team behind G  E’s innovations and growth and
                            join us in our next era.</h3>
                        <div class="new-s-curve-module-link">
                            <a class="p related-content__footer_link" target="" data-analytics-tracking-event="link_click"
                                data-analytics-link-type="Related Content"
                                data-analytics-link-name="More Insights from G  E"
                                data-analytics-link-title="">Learn more<svg id="Layer_1" data-name="Layer 1"
                                    xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                    <g id="Caret_Right_-_32" data-name="Caret Right - 32">
                                        <path
                                            d="M11,30a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42L22.59,16,10.29,3.71a1,1,0,0,1,1.42-1.42l13,13a1,1,0,0,1,0,1.42l-13,13A1,1,0,0,1,11,30Z">
                                        </path>
                                    </g>
                                </svg>
                            </a>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-divider />
            <el-row class="padding-top24" :gutter="24" justify="center">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="new-s-curve-module-right">
                        <el-image fit="cover" :src="imgUrl3" class="el-image-class pos-relative"></el-image>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="new-s-curve-module-left padding-left100">
                        <h5 class="new-s-curve-module-title">Introducing our new era</h5>
                        <h3 class="new-s-curve-module-text">As a stand-alone company, G  E is a leader in precision
                            care, infusing innovation with patient-focused technologies to enable better care.</h3>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
let imgUrl1 = ref(new URL(`@/assets/home/investors-desktop.jpg`, import.meta.url).href)
let imgUrl2 = ref(new URL(`@/assets/home/career-ops-desktop.webp`, import.meta.url).href)
let imgUrl3 = ref(new URL(`@/assets/home/waukesha-featured-overlap-desktop.avif`, import.meta.url).href)
</script>
<style lang="scss" scoped>
.new-s-curve-module {
    background-color: #ffffff;
    padding-top: 48px;
    padding-bottom: 48px;
}

.new-s-curve-module-wrap {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 24px;
    max-width: 1280px;
}

.new-s-curve-module-item {}
.margin-bottom40{
    margin-bottom: 40px;
}
.margin-bottom64{
    margin-bottom: 64px;
}
.new-s-curve-module-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.padding-left100 {
    padding-left: 100px;
}

.padding-right100 {
    padding-right: 100px;
}

.padding-top24 {
    padding-top: 24px;
}

.new-s-curve-module-title {
    color: #222222;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: .36px;
    font-weight: 600;
    margin-bottom: 16px;
}

.new-s-curve-module-text {
    color: #222222;
    font-weight: 400;
    font-size: 1.9rem;
    line-height: 2.8rem;
    letter-spacing: -1.25px;
    padding-bottom: 16px;
}

.new-s-curve-module-link {
    .related-content__footer_link {
        line-height: 1.5rem;
        display: inline-block;
        margin-top: 48px;
        white-space: pre;
        color: var(--interaction);

        &:hover {
            text-decoration: underline;
        }

        svg {
            margin-left: 8px;
            fill: var(--interaction) !important;
            width: 14px;
            height: 14px;
            vertical-align: middle;
        }
    }
}
.pos-relative{
    position: relative;
    right: 11%;
}
.el-image-class {
    border-radius: 16px;
    width: 111%;
    height: auto;
    overflow: auto !important;
}
@media (max-width: 960px) { 
    .el-image-class{
        width: 100%;
    }
    .pos-relative{
        right: 0;
    }
    
    .padding-left100 {
        padding-left: 0;
    }
}
@media (max-width: 1000px) {
    .el-image-class{
        width: 100%;
    }
}
</style>